<template>
	<view class="set_item" @click="goPath()">
		<view class="icon">
			<MyIcons :size="iconSize" :src="joinSystemPath(iconFileName)"/>
		</view>
		<view class="content">
			<view class="name">
				{{name}}
			</view>
			<view class="go">
				<slot name="rightBtn">
					<MyIcons :size="iconSize" :src="joinSystemPath('right.png')"/>
				</slot>
			</view>
		</view>
	</view>
</template>

<script setup>
	import MyIcons from '@/components/MyIcons/MyIcons.vue'
	
	import {
		joinSystemPath
	} from '@/utils/imgJoinName.js'
	
	import {dynamicStyleStore} from '@/stores/dynamicStyle.js'
	
	const dynamicStyle_store = dynamicStyleStore()
	
	const {
		primary_text_color
	} = dynamicStyle_store.globalStyle
	
	const props = defineProps({
		name:{
			type: String
		},
		iconFileName:{
			type:String
		},
		url:{
			type:String
		},
		iconBgc:{
			type:String
		},
		clickFun:{
			type:Function
		},
		iconSize:{
			type:String,
			default:'30px'
		},
		marginRight:{
			type:String,
			default:'12rpx'
		}
	})
	
	//跳转
	const goPath=()=>{
		if(props.url){
			uni.navigateTo({
				url:props.url
			});
		}else if(props.clickFun){
			props.clickFun()
		}	
	}
</script>

<style lang="less">
	.set_item{
		display: flex;
		align-items: center;
		margin: 20rpx 0;
		.icon{
			background-color: v-bind(iconBgc);
			width: 120rpx;
			height: 120rpx;
			border-radius:50%;
			flex-shrink:0;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-right: v-bind(marginRight);
		}
		.content{
			display: flex;
			align-items: center;
			width: 100%;
			justify-content: space-between;
			.name{
				color: v-bind('primary_text_color');
				font-size: 30rpx;
			}
		}
	}
</style>